<template>
  <vxe-modal :loading="loading" ref="evModal" v-bind="options" v-on="events">
    <template v-if="$slots.title" #title><slot name="title" /></template>
    <template v-if="$slots.header" #header><slot name="header" /></template>
    <template #default>
      <slot />
    </template>
    <template #footer><slot name="footer" /></template>
  </vxe-modal>
</template>

<script setup>
import { ref } from 'vue';
import { useModalConfig } from './modal-config.js';

const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      options: {},
      events: {},
    }),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const { options, events } = useModalConfig(props?.config);
let evModal = ref();
const changeZoom = () => evModal.value.zoom();
defineExpose({
  changeZoom,
});
</script>

<style scoped></style>
